<template>
  <div class="tmpl">
    <div v-for="(item,index) in goodsList" class="shopCartListStyle">
      <!-- 1.0 switch开关 -->
      <div class="mySwitch">
        <mt-switch @change="statisticsTotalPriceAndTotalCount" v-model="switchValues[index]"></mt-switch>
      </div>
      <!-- 2.0 缩略图-->
      <div class="thumbImageStyle">
        <img width="75px" height="75px" :src="'http://api.cat-shop.penkuoer.com/'+item.coverImg">
      </div>
      <!-- 3.0 商品名称价格等信息-->
      <div class="shopContent">
        <h4>{{item.name}}</h4>
        <p>
          <span>{{item.price}}</span>
          &nbsp;商品数量:{{item.quantity}}
        </p>
      </div>
      <!--  4.0 删除商品按钮-->
      <div class="deleteStyle">
        <mt-button size="small" type="danger">删除</mt-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
/**
        购物车列表
    */
.shopCartListStyle {
  display: flex;
  margin-top: 5px;
  border-bottom: 1px solid rgba(1, 1, 1, 0.3);
  padding: 5px;
}

.mySwitch {
  flex: 0 0 20px;
  margin-right: 15px;
  margin-top: 30px;
}

.thumbImageStyle {
  flex: 0 0 70px;
  border: 1px solid rgba(92, 92, 92, 0.1);
  margin-right: 15px;
  padding: 3px;
  border-radius: 3px;
}

.shopContent {
  flex: 1;
}

.shopContent h4 {
  color: #0094ff;
  padding: 5px 0;
}

.shopContent p {
  color: black;
  font-size: 16px;
  margin-top: 20px;
}

.shopContent span {
  color: red;
}

.deleteStyle {
  margin-top: 30px;
}
</style>

<script>
import common from "../../tools/common.js";

import { getGoodsList, getCountByGoodsId } from "../../tools/shopcartHelper.js";

export default {
  data() {
    return {
      switchValues: [],
      goodsList: []
    };
  },
  created() {
    //1.获取商品信息列表
    this.getGoodsListData();
  },
  methods: {
    //获取商品列表信息
    getGoodsListData() {
      var _this = this;
      //获取所有商品的id，准备成 id1,id2,id3
      var localGoodsList = getGoodsList();

      //装ids的数组
      var ids = [];
      localGoodsList.forEach(item => {
        ids.push(item.goodsId);
      });

      const idsString = ids.join(",");
      //判断当出现故障时,设置默认id
      for (let i = 0, len = idsString.length; i < len; i++) {
        if (i.goodsId == "undefined") {
          i.goodsId = Math.floor(Math.random(10, 1000) + 10);
        }
        console.log(idsString);
      }

      //2.url
      //   const url = common.apihost + "api/goods/getshopcarlist/" + idsString;
      const url = common.apihost + "api/v1/products/" + idsString;

      //3.send request
      this.$http.get(url).then(
        res => {
          //console.log(res.body.message);
          res.body.message.forEach(item => {
            item.count = getCountByGoodsId(item.id);
            //添加对应个数的开关的boolean值,默认都打开
            _this.switchValues.push(true);
          });
          console.log(res.body.message);
          this.goodsList = res.data;

          //计算商品的价格和总数
          _this.statisticsTotalPriceAndTotalCount();
        },
        err => {
          console.log(err);
        }
      );
    },
    //计算商品总价和总个数
    statisticsTotalPriceAndTotalCount() {
      console.log(1111111);
      //根据我们按钮中的状态来决定吧
      var totalPrice = 0;
      var totalCount = 0;
      this.switchValues.forEach((item, index) => {
        if (item) {
          var count = this.goodsList[index].count;
          var price = this.goodsList[index].sell_price;
          totalCount += count;
          totalPrice += parseFloat(price) * parseInt(count);
        }
      });

      console.log("总数" + totalCount);
      console.log("total price" + totalPrice);
    }
  }
};
</script>